<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册信息</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<p>
					姓名：<input type="text" v-model="stu.uname" value="oldliu"/>
				</p>
				<p>
					性别：<input type="radio" name="sex" v-model="stu.sex" value="male"/>男<input type="radio" name="sex" v-model="stu.sex" value="female"/>女
				</p>
				<p>
					爱好：
					<input type="checkbox" name="like" v-model="stu.like" value="唱歌"/>唱歌
					<input type="checkbox" name="like" v-model="stu.like" value="跳舞"/>跳舞
					<input type="checkbox" name="like" v-model="stu.like" value="RAP"/>RAP
					<input type="checkbox" name="like" v-model="stu.like" value="篮球"/>篮球
				</p>
			</div>
			<div>
				<p>
					{{stu}}
				</p>
				<p>
					{{stu.uname}}<br/>{{stu.sex}}
					<br>
					{{stu.like.join(' ')}}
				</p>
			</div>
		</div>
		<script>
		var vm=new Vue({
			el:"#app",
			data:{
				stu:{
					uname:null,
					like:[],
					sex:'female'
				}
			}
		})
		</script>
	</body>
</html>
